<template>
    <div class="order-detail-action-bar">
        <template v-if="statusInfo.isHaveReceivi">
            <div></div>
            <Button class="action-btn" :style="themeBackround" :round="buttonRound" size="large" @click="showEnsureTip">确认{{statusInfo.isHavePickUpCode ? '提货' : '收货' }}</Button>
        </template>
        <template v-else-if="statusInfo.isHavePay">
            <div class="price" :style="`color: ${theme};`">
                <span class="label">￥</span>{{price.toFixed(2)}}
                <div class="origin-price" v-if="discountPrice">
                    共优惠<span class="label">￥</span>{{discountPrice.toFixed(2)}}
                </div>
            </div>
            <Button class="action-btn" :style="themeBackround" :round="buttonRound" size="large" @click="payAction">立即支付</Button>
        </template>
        <!-- 确认弹窗 -->
        <TechDialog
            ref="ensureTip"
            :title="`确认${statusInfo.isHavePickUpCode ? '提货' : '收货'}`"
            :content="`请确认您已经${statusInfo.isHavePickUpCode ? '领取' : '收到'}了货物`"
            :okText="`确认${statusInfo.isHavePickUpCode ? '提货' : '收货'}`"
            :haveCancel="true"
            container="body"
            @ok="receiviAction"
        />
    </div>
</template>

<script>
import { Button } from 'vant';
import { TechDialog } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'OrderDetailActionBar', // 订单详情操作bar
    mixins: [ModeMixin],
    components: {
        Button,
        TechDialog,
    },
    props: {
        statusInfo: {
            type: Object,
            default: () => {},
        },
        price: {
            type: Number,
            default: 0,
        },
        discountPrice: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        showEnsureTip() {
            this.$refs.ensureTip.show();
        },
        receiviAction() {
            this.$emit('receivi');
        },
        payAction() {
            this.$emit('pay');
        },
    },
};
</script>

<style lang="less">
.order-detail-action-bar {
    .flex();
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: @footer-height;
    background-color: @white;
    box-shadow: 0px -4px 8px 0px rgba(51,51,51,0.03);
    .p-h(@shop-gap-md);
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .price {
        .flex();
        font-size: 23px;
        color: @text-color;
        font-weight: 500;
        font-family: @font-family-number;
        align-items: baseline;
        color: @shop-price-color;
        .label {
            .m-r(-3);
        }
        .origin-price {
            font-size: @shop-font-size;
            color: @tip-color;
            opacity: 0.7;
            height: 13px;
            line-height: 13px;
            border-left: 1px solid @tip-color;
            .m-l(@shop-gap-sm);
            .p-l(@shop-gap-sm);
        }
    }
    .action-btn {
        width:124px;
    }
}
</style>
